<template>
  <div class="FactoryDiagram">
    <div class="leftbox">
      <el-tree
        class="filter-tree"
        node-key="id"
        :data="data"
        :highlight-current="true"
        :props="defaultProps"
        @node-click="handleNodeClick"
        ref="tree">
       </el-tree>
    </div>
    <div class="imgbodybox">
      <div class="image">
        <img v-if="entity.pictureFile" :src="'data:image/png;base64,' + entity.pictureFile" alt="">
        <el-empty v-else description="暂无图片" :image-size="100"></el-empty>
      </div>
      <div>
        <el-button type="primary" size="small" @click="newadd" :disabled="entity.pictureFile?true:false">新增</el-button>
        <el-button type="primary" size="small" @click="update">修改</el-button>
        <el-button type="danger" size="small"  @click="del">删除</el-button>
      </div>
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%">
        <div>
          <el-upload
                class="avatar-uploader"
                action=""
                :auto-upload="false"
                :show-file-list="false"
                :on-change="httpRequest"
              >
                <span v-if="imageUrl">
                  <img  :src="imageUrl"  class="avatar" ref="avatar"/>
                  <!-- <img v-else :src="'data:image/png;base64,' + entity.pictureFile"  class="avatarss" /> -->
                </span>
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="quxiao" size="small">取 消</el-button>
          <el-button type="primary" @click="submit" size="small">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getyongdianlistapi } from '@/api/energy-consumption/Basic-information/medium'
import {getenergylogoapi,addenergylogo,updateenergylogo,deleteenergylogo} from '@/api/energy-consumption/CarbonEmissions/Department'
export default {
  name: 'CallPoliceIndex',

  data() {
    return {
      data: [],
      defaultProps: {
        label: 'name',
        children:'sonList'
      },
      imageUrl:'',
      entity: {},
      fileBase64:'',
      dialogVisible: false,
      isflag: true,
      treevalue:{}
    };
  },

  async mounted() {
    // 获取用电单位
    const { data: { list } } = await getyongdianlistapi()
    this.data = list
  },

  methods: {
    // 弹窗确认
    async submit() {
      if (!this.treevalue.id) return this.$message.warning('请先选择企业')
      try {
          this.isflag ? await addenergylogo(this.treevalue.id, { uploadFile: this.fileBase64 }) :
          await updateenergylogo(this.treevalue.id, { uploadFile: this.fileBase64 })
          this.$message({
            type:'success',
            message: this.isflag ? '新增成功' : '修改成功'
          })
      } catch (error) {
        this.$message.warning(error.message)
      }
      this.dialogVisible = false
      this.handleNodeClick(this.treevalue)
      this.imageUrl=''
    },
    // 树节点点击
    async handleNodeClick(val) {
      this.treevalue=val
      const {data:{entity}} = await getenergylogoapi({ companyId: val.id })
      this.entity=entity
    },
    // 新增
    newadd() {
      if (!this.treevalue.id) return this.$message.warning('请先选择企业')
      this.dialogVisible = true
      this.isflag=true
    },
    quxiao() {
      this.dialogVisible = false
      this.imageUrl=''
    },
    // 修改
    update() {
      if (!this.treevalue.id) return this.$message.warning('请先选择企业')
      if (!this.entity.pictureFile) return this.$message.warning('所选企业暂无可修改数据')
      this.dialogVisible = true
      this.imageUrl='data:image/png;base64,' +this.entity.pictureFile
      this.isflag=false
    },
    // 删除头像
    del () {
      if (!this.treevalue.id) return this.$message.warning('请先选择企业')
      if (!this.entity.pictureFile) return this.$message.warning('所选企业暂无可删除数据')
      this.$confirm('此操作将永久删除该企业图片, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res = await deleteenergylogo(this.treevalue.id)
          this.$message({
            type: res.code == '200' ? 'success' : 'warning',
            message:res.code=='200'?'删除成功':res.message
          })
          this.handleNodeClick(this.treevalue)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 上传文件
    httpRequest(data) {
      this.fileBase64 = data.raw
      this.imageUrl = URL.createObjectURL(data.raw)
      // // 这是限制上传文件类型
      // const isPFX =
      //   data.file.type === 'image/jpeg' ||
      //   data.file.type === 'image/jpg' ||
      //   data.file.type === 'image/png'
      // const isLt2M = data.file.size / 1024 / 1024 < 2
      // if (!isPFX) {
      //   this.$message.error('上传头像图片只能是 JPG、PNG、JPEG 格式!')
      // } else if (!isLt2M) {
      //   this.$message.error('上传文件大小不能超过 2MB!')
      // } else {
      //   this.getBase64(data.file).then((resBase64) => {
      //     this.fileBase64 = resBase64.split(',')[1] // 直接拿到base64信息
      //   })
      // }
    },
    // 这个file参数 也就是文件信息
    getBase64 (file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader()
        let fileResult = ''
        reader.readAsDataURL(file)
        // 开始转
        reader.onload = function () {
          fileResult = reader.result
        }
        // 转 失败
        reader.onerror = function (error) {
          reject(error)
        }
        // 转 结束  咱就 resolve 出去
        reader.onloadend = function () {
          resolve(fileResult)
        }
      })
    },
  },
};
</script>

<style scoped>
.FactoryDiagram{
  height: 100%;
  padding: 10px;
  display: flex;
  .leftbox{
    width: 300px;
    padding: 20px;
    background-color: #fff;
    margin-right: 10px;
  }
  .imgbodybox{
    height: 100%;
    width: calc(100% - 310px);
    background-color: #fff;
    padding: 20px;
    .image{
      width: 260px;
      height: 160px;
      background-color: #ffffff;
      border: 1px solid #e7e2e2;
      filter: drop-shadow(rgba(0, 0, 0, .15) 3px 3px 6px);
      margin-bottom: 30px;
      img{
        width: 100%;
        height: 100%;
      }
    }
  }
}
::v-deep .el-empty{
  padding: 0;
}
::v-deep .el-dialog__footer{
  text-align: center;
}
::v-deep .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  ::v-deep .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  ::v-deep .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 260px;
    height: 160px;
    line-height: 160px;
    text-align: center;
  }
  ::v-deep .avatar {
    width: 260px;
    height: 160px;
    display: block;
  }
::v-deep .el-button--danger{
  background-color: red;
}
</style>